<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#box{
			width:10px; height: 10px; background: blue;
			position: absolute; left: 400px; top: 200px;
			border-radius: 50%;
		}
	</style>
	<script type="text/javascript">
		
		//缓冲运动
		onload = function(){
			//使得Div box 围绕 Div point 做圆周运动
			var box = document.getElementById("box");
			var point = document.getElementById("point");
			//首先确定中心点point
			var center_point = {x:point.offsetLeft - point.offsetWidth/2, y:point.offsetTop - point.offsetHeight/2};
			//用到三角函数sin() cos() 设定一个初始角度dargee
			var dargee = 0;
			setInterval(function(){
				//半径设为100
				box.style.left = center_point.x + 100*Math.cos(dargee*Math.PI/180) - box.offsetWidth/2 + "px";
				//cos()用来锁定x轴的移动 sin()用来锁定y轴的移动
				box.style.top = center_point.y + 100*Math.sin(dargee*Math.PI/180) - box.offsetHeight/2 + "px";
				dargee++;
			},30);
		}
	</script>
	<body>
		<div id="box">
			
		</div>
		<div id="point" style="width: 5px; height: 5px; position: absolute; left:400px; top: 200px; background: black;">
			
		</div>
	</body>
</html>
